<template>
  <view class="container">
    <view class="tickets">
      <view class="ticketsBox">
        <view class="ticketsBox_top">
          <!-- <tui-searchbar radius="20rpx" placeholder="搜索" backgroundColor="transparent"
            inputBgColor="rgba(245, 245, 245, 1)" @click="handleClick"></tui-searchbar> -->
        </view>
        <view class="ticketsBox_bottom">
          <view class="ticketsBox_bottom_left">
            <scroll-view class="left-scroll-view" scroll-y :style="{height: wh - 76 + 'px'}">
              <block v-for="(item,i) in animalList" :key="i">
                <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
                  {{item.name}}
                </view>
              </block>
            </scroll-view>
          </view>
          <view class="ticketsBox_bottom_right">
            <!-- <userActivity></userActivity> -->
            <scroll-view class="ticketsBox_bottom_right_box" scroll-y :style="{height: wh - 76 + 'px'}">
              <block v-for="(item,i) in cateLevel2" :key="i">
                <view>
                  <ticketsItem ref="ticketsItemRef" :ticketsItem="item" @numberChange="numberChange"
                    @popupShowItem="popupShowItem">
                  </ticketsItem>
                </view>
              </block>
            </scroll-view>
          </view>
        </view>
      </view>
      <!-- 弹框结算 -->
      <view class="stripBox">
        <view class="stripBox_left" @click="shoppingShowItem">
          <view class="stripBox_left_right" v-if="!checkedCount <= 0">{{checkedCount}}</view>
          <image src="/static/shopping.png" mode="aspectFill"></image>
        </view>
        <view class="stripBox_center">
          总计 ¥{{checkedGoodsAmount}}
        </view>
        <view class="stripBox_right" @click="settlementClick">
          结算
        </view>
      </view>
    </view>


    <view class="shoppingShow">
      <van-popup :show="shoppingShow" round custom-style="height: 48%;width:93%;" @close="shoppingShow = false">
        <view class="shoppingBox">
          <view class="shoppingBox_left" @click="changeAllState">
            <radio :checked="isFullCheck" color="rgba(253, 211, 56, 1)"></radio>
            <text style="margin-left: 10rpx;">全选</text>
          </view>
          <view class="shoppingBox_right" @click="emptyAllState">
            <image src="/static/delete.png" mode="aspectFill"></image>
            <text>清空购物袋</text>
          </view>
        </view>
        <scroll-view class="shoppingBoxScroll" scroll-y>
          <block v-for="(item,i) in cart" :key="i">
            <ticketsItem :showRadio="true" :ticketsItem="item" @numberChange="numberChange">
            </ticketsItem>
          </block>
        </scroll-view>
        <view class="minImage"></view>
      </van-popup>
    </view>

    <!--  -->
    <van-popup :show="shareShow" round position="bottom" custom-style="height: 25%" @close="shareShowClose">
      <view class="share_Input">
        <button type="default" open-type="share">
          <image src="/static/images/weixin.png" mode="aspectFill"></image>
          <text>发送给好友</text>
        </button>
        <button type="default" @click="oncircleShow">
          <image src="/static/images/pyquan.png" mode="aspectFill"></image>
          <text>分享到朋友圈</text>
        </button>
      </view>
    </van-popup>

    <view class="circleType">
      <van-popup :show="circleShow" custom-style="height: 10%;width : 40%" @close="circleShowClose">
        <view class="share_Input">
          点击右上角选择可分享朋友圈
        </view>
        <view class="minImage"></view>
      </van-popup>
    </view>
  </view>
</template>

<script>
  import ticketsItem from "@/components/tickets_Item/tickets_Item.vue"
  // import userActivity from "@/components/user_activity.vue"
  import {
    getticketsList
  } from '@/api/tickets.js'

  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'

  export default {
    data() {
      return {
        active: 0,
        wh: 0,
        activeKey: 0,
        shoppingShow: false,
        animalList: [],
        // 二级标题
        cateLevel2: [],
        // 分享
        shareShow: false,
        // 朋友圈
        circleShow: false,
        // 分享数据
        sharedata: {}
      };
    },

    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: this.sharedata.title,
        imageUrl: this.sharedata.productImg,
        path: '/subpkg/tickets_list/tickets_list?userId=' + this.userInfo.id,
        success: (res) => {
          that.$util.Tips({
            title: res
          })
        },
        fail: (res) => {
          that.$util.Tips({
            title: res
          })
        }
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.sharedata.title,
        imageUrl: this.sharedata.productImg,
        path: '/subpkg/tickets_list/tickets_list?userId=' + this.userInfo.id
      };
    },
    // #endif

    components: {
      ticketsItem,
    },
    computed: {
      ...mapState('m_cart', ['cart']),
      ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
      ...mapGetters('m_user', ['userInfo', 'currentStoreId']),
      // 2. 是否全选
      isFullCheck() {
        return this.total === this.checkedCount
      }
    },
    onLoad() {
      uni.report('EntertheTicketList', '进入门票列表');
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight
      // 获取门票列表
      this.getticketsItem()
    },
    methods: {
      ...mapMutations('m_cart', ['updateAllGoodsState', 'emptyGoodsState']),
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      getticketsItem() {
        getticketsList(this.currentStoreId).then(res => {
          // console.log(res)
          this.animalList = res.data
          this.animalList.forEach(item => {
            item.products.forEach(item1 => {
              if (item1.sliderImgs) {
                item1.sliderImgs = item1.sliderImgs.split(',')
              }
            })
          })
          this.cateLevel2 = this.animalList[0].products
          // this.radioValue()
        }).catch(err => {
          this.$util.Tips({
            title: err
          })
        })
      },
      radioValue() {
        // console.log('000')
        if (this.cateLevel2.length != 0) {
          this.cateLevel2.forEach(item => {
            this.cart.forEach(item1 => {
              if (item.id == item1.id) {
                item.specConfig = item1.goods_count
              }
            })
          })
        }
      },
      // 选中项改变的事件处理函数
      activeChanged(i) {
        this.active = i
        // 为二级分类列表重新赋值
        this.cateLevel2 = this.animalList[i].products
        this.radioValue()
      },
      // 点击全选
      changeAllState() {
        // 修改购物车中所有商品的选中状态
        // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
        this.updateAllGoodsState(!this.isFullCheck)
      },
      // 清空购物袋
      emptyAllState() {
        this.emptyGoodsState([])
        this.cateLevel2.forEach(item => {
          item.specConfig = 0
        })

        this.shoppingShow = false
      },
      numberChange(e) {
        // console.log(e)
        this.cateLevel2.forEach(item => {
          if (e.id == item.id) {
            if (e.type == 'plus') {
              item.specConfig += e.goods_count
            } else {
              item.specConfig = e.goods_count
            }
          }
        })
      },
      shoppingShowItem() {
        if (this.cart.length > 0) {
          this.shoppingShow = !this.shoppingShow
        }
      },
      shareShowClose() {
        this.shareShow = false
      },
      oncircleShow() {
        this.shareShow = false
        this.circleShow = true
      },
      circleShowClose() {
        this.circleShow = false
      },
      popupShowItem(e) {
        // console.log(e)
        this.shareShow = true
        this.sharedata = e
      },
      settlementClick() {
        if (this.cart.length != 0) {
          this.navTo('/subpkg/settlement/settlement')
        } else {
          this.$util.Tips({
            title:'请先添加商品！'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .ItemBoxalicen:last-child {
    border: none;
  }

  /deep/ .van-popup {
    z-index: 1000 !important;
  }

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .tickets {
    .ticketsBox {
      .ticketsBox_top {
        margin: 30rpx 0;
      }

      .ticketsBox_bottom {
        display: flex;
        padding-right: 24rpx;


        .left-scroll-view {
          width: 163rpx;
          border: 2rpx solid rgba(237, 237, 237, 0.5);

          .left-scroll-view-item {
            line-height: 96rpx;
            height: 96rpx;
            background-color: #ffffff;
            text-align: center;
            font-size: 32rpx;
            color: rgba(61, 61, 61, 0.75);

            // 激活项的样式
            &.active {
              background-color: rgba(237, 237, 237, 1);
              position: relative;
              color: rgba(61, 61, 61, 1);
            }
          }
        }

        .ticketsBox_bottom_right {
          width: 100%;

          .ticketsBox_bottom_right_box {
            width: 100%;
            padding-bottom: 108rpx;
          }
        }
      }
    }
  }

  .stripBox {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 50%;
    bottom: 20rpx;
    z-index: 999;
    transform: translate(-50%);
    width: 704rpx;
    height: 104rpx;
    // padding-right: 150rpx;
    line-height: 104rpx;
    border-radius: 52rpx;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.06);

    .stripBox_left {
      position: relative;
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
      background-color: rgba(241, 241, 241, 1);
      display: flex;
      justify-content: center;
      align-items: center;

      .stripBox_left_right {
        position: absolute;
        top: 0;
        right: 0;
        width: 34rpx;
        height: 34rpx;
        border-radius: 50%;
        background-color: rgba(253, 211, 56, 1);
        line-height: 34rpx;
        text-align: center;
        font-size: 24rpx;
        color: rgba(61, 61, 61, 1);
      }

      image {
        width: 47.5rpx;
        height: 54.5rpx;
      }
    }

    .stripBox_center {}

    .stripBox_right {
      width: 206rpx;
      height: 104rpx;
      font-weight: 600;
      background-color: rgba(253, 211, 56, 1);
      line-height: 104rpx;
      text-align: center;
    }
  }


  .shoppingShow {

    /deep/ .van-popup--center {
      top: 64%;
    }

    .shoppingBox {
      padding: 37rpx 42rpx 37rpx 29rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(241, 241, 241, 1);

      .shoppingBox_left {
        display: flex;
        align-items: center;

        text {
          color: rgba(61, 61, 61, 1);
          font-size: 30rpx;
        }
      }

      .shoppingBox_right {
        display: flex;
        align-items: center;

        text {
          color: rgba(61, 61, 61, 0.5);
          font-size: 30rpx;
        }

        image {
          width: 32rpx;
          height: 34rpx;
          margin-right: 10rpx;
        }
      }
    }

    .shoppingBoxScroll {
      height: 75%;
    }

    .minImage {
      position: absolute;
      left: 40rpx;
      bottom: -35rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: #fff transparent transparent transparent;
    }
  }

  /deep/ .tui-search-bar__label,
  .data-v-2bd6b9dc {
    z-index: 0 !important;
  }

  .share_Input {
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    button {
      background-color: #fff;
      padding: 0 !important;
      // border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      image {
        width: 110rpx;
        height: 110rpx;
      }

      text {
        font-size: 32rpx;
      }
    }
  }

  .circleType {
    /deep/ .van-popup--center {
      position: fixed !important;
      top: 7% !important;
      left: 77% !important;
    }

    /deep/ .van-popup {
      border-radius: 6rpx;
    }

    .share_Input {
      font-size: 26rpx;
      padding: 0 24rpx;
      line-height: 50rpx;
    }

    .minImage {
      position: absolute;
      right: 96rpx;
      top: -38rpx;
      width: 0;
      height: 0;
      overflow: hidden;
      font-size: 0;
      /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
      line-height: 0;
      /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
      border-width: 10px;
      border-style: solid dashed dashed dashed;
      /*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
      border-color: transparent transparent #fff transparent;
    }
  }
</style>
